<!doctype html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style type="text/css">
html,body,div,canvas{
	margin:0;
	padding:0;
}
#box{
	width:300px;
	height:450px;
	margin:0 auto;
	transform-style: preserve-3d;
	position:relative;
	perspective:1000px;
	perspective-origin:50% 100%;
}
#inner{
	width:300px;
	height:450px;
	margin:0 auto;
	transform-style: preserve-3d;
	position:relative;
}
#inner > canvas{
	transform-origin:0 50%;
}
</style>
</head>
<body bgcolor="#000000">
<div id="box"><div id="inner"></div></div>
</body>
<script>
var box = document.getElementById("box");
var inner = document.getElementById("inner");
var width = 300 ;
var height = 450 ;


function drawTree(canvas){
	canvas.style.position = "absolute" ;
	canvas.style.left = width/2 + "px" ;
	canvas.style.top = 0 ;
	canvas.width = width/2 ;
	canvas.height = height ;
	var cxt = canvas.getContext("2d");
	function drawLine(x,y,deg,width){
		if(x < 0)return ;
		var x1 = x+width*2*Math.cos(deg) ;
		var y1 = y-2-width*3*Math.sin(deg) ;
		cxt.beginPath();
		if(width < 5){
			cxt.strokeStyle = "rgba(0,"+Math.min(255,~~(100+width*30))+",0,.4)";
		}else{
			cxt.strokeStyle = "#FFF";
		}
		cxt.lineWidth = width ;
		cxt.moveTo(x,y);
		cxt.lineTo(x1,y1);
		cxt.stroke();
		width -= 0.4;
		if(width > 1){
			drawLine(x1,y1,deg,width);
			if(Math.random()*width > 0.6){
				var dir = [1,-1][Math.round(Math.random())]*0.12*width;
				width *= 0.8;
				drawLine(x1,y1,deg+dir,width);
				if(Math.random() > 0.7)
					drawLine(x1,y1,deg-dir,width);
			}
		}
	}
	drawLine(0,height,Math.PI/2,9.5);
}

var len = 17 ;
var fragment = document.createDocumentFragment();
for(var i = 0 ;i < len ; i ++){
	var newCanvas = document.createElement("canvas");
	newCanvas.style.transform = "rotateY("+Math.round(i*360/len)+"deg)";
	drawTree(newCanvas);
	fragment.appendChild(newCanvas);
}
inner.appendChild(fragment);

var step = 0 ;
function changeRotate(){
	step ++ ;
	inner.style.transform = "rotateY("+step+"deg)";
	requestAnimationFrame(changeRotate);
}
changeRotate();
</script>
</html>